<template>
    <div :class="{ 'header-wrap': screenWidth > 1000, 'h5h': screenWidth <= 1000 }"
        :style="{ backgroundColor: styleColor == 0 ? '' : '#fff', borderBottom: styleColor == 0 ? '' : '1px solid #ddd' }">
        <div class="wrap1" 
            :style="{ color: styleColor == 0 ? '#fff' : '#333', borderBottom: styleColor == 0 ? '' : '1px solid #ddd' }"
            v-if="screenWidth > 1000">
            <div class="weather"><span>{{ getDate() }}</span><i class="l-iconfont  link-click">&#xe68e;</i><span
                    class="link-click">{{ weatherData }}
                </span></div>
            <div class="nav">
                <div @click="openUrl('https://wlj.xa.gov.cn/')">政务网</div>
            </div>
        </div>
        <div class="wrap2" v-if="screenWidth > 1000">
            <div class="logo" @click="goPage('/index')"><img v-if="!styleColor" src="@/assets/img/logo.png" alt=""><img
                    v-else src="@/assets/img/LOGO2.png" alt=""></div>
            <div class="nav-rigth">
                <div class="nav-wrap">
                    <div @click="goPage('/index')"
                        :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/index', 'chover': styleColor != 0 }">
                        <span class="header-title">首页</span>
                    </div>
                    <div @click="goPage('/talent-travels')"
                        :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/talent-travels', 'chover': styleColor != 0 }">
                        <span class="header-title">旅游头条</span></div>
                    <div @click="goPage('/scenic-news')"
                        :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/scenic-news', 'chover': styleColor != 0 }">
                        <span class="header-title">景区动态</span></div>
                    <div @click="goPage('/play-xian')"
                        :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/play-xian', 'chover': styleColor != 0 }">
                        <span class="header-title">玩转西安</span></div>
                    <div @click="goPage('/online')"
                        :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/online', 'chover': styleColor != 0 }">
                        <span class="header-title">云游大西安</span></div>
                    <div @click="goPage('/serve-you')"
                        :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/serve-you', 'chover': styleColor != 0 }">
                        <span class="header-title">旅游咨询</span></div>
                    <div @click="goPage('/culture-xian')"
                        :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/culture-xian', 'chover': styleColor != 0 }">
                        <span class="header-title">文化西安</span></div>
                </div>
                <div class="btn-wrap" :style="{ color: styleColor == 0 ? '#fff' : '#333' }">
                    <div class="languageSelection">
                        <div class="language">中文简体</div>
                        <div class="el-divider el-divider--vertical"><!----></div><i
                            class="l-iconfont down">&#xe68a;</i>
                    </div>
                    <div class="select-box">
                        <p @click="goPage('/index', 'zh')"> 中文简体 </p>
                        <p @click="goPage('/lang-index', 'en')"> English </p>
                        <p @click="goPage('/lang-index', 'ja')"> 日本語 </p>
                        <p @click="goPage('/lang-index', 'ko')"> 한국어 </p>
                        <p @click="goPage('/lang-index', 'ru')"> русская версия </p>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="screenWidth <= 1000" @click="goPage('/index')" class="logo"><img src="@/assets/img/LOGO2.png" alt="">
        </div>
        <div @click="showMenu = true" v-if="screenWidth <= 1000" class="menu"><img src="@/assets/img/menu.png" alt="">
        </div>
        <div class="h5h-mask" v-if="screenWidth <= 1000 && showMenu">
            <div @click="showMenu = false" class="close"><i class="l-iconfont">&#xe6ed;</i></div>
            <div class="mask-logo"><img src="@/assets/img/LOGO2.png" alt="">
            </div>
            <div class="nav-wrap">
                <div @click="goPage('/index')"
                    :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/index' }">
                    <span class="header-title">首页</span>
                </div>
                <div @click="goPage('/talent-travels')"
                    :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/talent-travels' }"><span
                        class="header-title">旅游头条</span></div>
                <div @click="goPage('/scenic-news')"
                    :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/scenic-news' }"><span
                        class="header-title">景区动态</span></div>
                <div @click="goPage('/play-xian')"
                    :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/play-xian' }"><span
                        class="header-title">玩转西安</span></div>
                <div @click="goPage('/online')"
                    :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/online' }">
                    <span class="header-title">云游大西安</span>
                </div>
                <div @click="goPage('/serve-you')"
                    :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/serve-you' }"><span
                        class="header-title">旅游咨询</span></div>
                <div @click="goPage('/culture-xian')"
                    :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/culture-xian' }"><span
                        class="header-title">文化西安</span></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'HeaderS', // 组件名称
    data() {
        return {
            showMenu: false,
        };
    },
    props: {
        styleColor: {
            type: Number,
            default: 0
        }
    },
    created() {
        sessionStorage.setItem('lang', 'zh')
        this.$i18n.locale = sessionStorage.getItem('lang')
        console.log();

    },
    methods: {
        openUrl(url) {
            this.$confirm('','温馨提示',{
                message:this.$store.state.cnode,
                dangerouslyUseHTMLString:true,
                confirmButtonText: '继续访问',
                cancelButtonText: '放弃',
                center:true
            })
          .then(_ => {
            window.open(url, '_blank');
          })
          .catch(_ => {})
        },
        goPage(url, lang) {
            if (lang && this.$i18n.locale!=lang) {
                sessionStorage.setItem('lang', lang)
                this.$i18n.locale = sessionStorage.getItem('lang'); // 切换语言
                this.$router.push(url)
                return
            }
            if (this.$route.path == url) {
                return
            } else {
                this.$router.push(url)
            }

        },
        getDate() {
            const today = new Date();

            // 获取年份
            const year = today.getFullYear();

            // 获取月份（注意：月份从 0 开始，需要加 1）
            const month = today.getMonth() + 1;

            // 获取日期
            const day = today.getDate();

            // 获取星期（0 表示周日，1 表示周一，依此类推）
            const weekDay = today.getDay();

            // 将星期转换为中文
            const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            const weekDayName = weekDays[weekDay];
            const formattedMonth = month < 10 ? `0${month}` : month;
            const formattedDay = day < 10 ? `0${day}` : day;

            // 输出格式化后的日期
            return `${year}-${formattedMonth}-${formattedDay} ${weekDayName}`
        },
    },
    computed: {
        screenWidth() {
            return this.$store.getters.screenWidth
        },
        path() {
            return this.$route.path; // 获取当前路径
        },
        weatherData() {
            return sessionStorage.getItem('weatherData')
        }
    },

    watch: {
        // 监听器
    },

};
</script>

<style scoped>
@import "@/assets/css/head.css";

.header-wrap .nav-rigth .nav-wrap {
    height: 2.91667vw;
    line-height: 2.91667vw;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-right: 1.04167vw;
}

.chover {
    color: #333 !important;
}

.header-wrap .nav-rigth .nav-wrap .hover-show:hover {
    color: #e31c1c;
}

.el-divider--vertical {
    margin: 0 0.41667vw
}
.wrap1{
    font-size: 0.8vw;
}
/* 样式 */
</style>